﻿
import * as echarts from 'echarts'
/** echart1的图表第一行第一个 */
export function echartsTaskChartLocation(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    title: [
      // {
      //   text: 'Pie label alignTo',
      //   left: 'center'
      // },
      {
        subtext: data[0].title,
        left: '16.67%',
        top: '0%',
        textAlign: 'center'
      },
      {
        subtext: data[1].title,
        left: '50%',
        top: '0%',
        textAlign: 'center'
      },
      {
        subtext: data[2].title,
        left: '83.33%',
        top: '0%',
        textAlign: 'center'
      }
    ],
    color: ['skyblue', 'grey', 'blue'],
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        data: data[0].series,
        label: {
          formatter: '{c}个',
          position: 'inner',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        left: 0,
        right: '66.6667%',
        top: 0,
        bottom: 0
      },
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        data: data[1].series,
        label: {
          formatter: '{c}个',
          position: 'inner',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        left: '33.3333%',
        right: '33.3333%',
        top: 0,
        bottom: 0
      },
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        data: data[2].series,
        label: {
          position: 'inner',
          alignTo: 'edge',
          margin: 20,
          formatter: '{c}个',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        left: '66.6667%',
        right: 0,
        top: 0,
        bottom: 0
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
/** echart4的图表第一行第二个 */
export function echartsTaskCountNowTask(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echart4'))
  const option = {
    //  backgroundColor: '#00265f',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '0%',
      top: '10%',
      right: '5%',
      bottom: '4%',
      containLabel: true
    },
    yAxis: [{
      type: 'category',
      data: data.titles,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
          width: 1,
          type: 'solid'
        }
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: '12'
        }
      }
    }],
    xAxis: [{
      type: 'value',
      axisLabel: {
        // formatter: '{value} %'
        show: true,
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: '12'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1	)',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        type: 'bar',
        data: data.values,
        barWidth: '35%', // 柱子宽度
        label: {
          show: true,
          position: 'top',
          fontSize: 10,
          textStyle: {
            color: 'white'
          }
        },
        // barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: '#27d08a',
            opacity: 1,
            barBorderRadius: 5
          }

        }
      }

    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}



function generateShelfSeries(data) {
  const items = [
    { title: '空', property: 'emptyShelfCount' },
    { title: '使用中', property: 'usedShelfCount' },
    { title: '锁定', property: 'blockedEmptyShelfCount' },
    { title: '预约', property: 'reserveShelfCount' },
  ];

  const option = {
    color: [
      '#67C23A',
      '#909399',
      '#409EFF',
      '#E6A23C',
    ],
    grid: {
      top: '3%',
      left: '10%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      itemHeight: 14,
      itemWidth: 14,
      selectedMode: false,
      data: items.map(x => x.title),
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: 10
      }
    },
    yAxis: [
      {
        show: false,
        type: 'value'
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '{value} %',
          color: 'rgba(255,255,255,0.5)',
        },
        min: 0,
        interval: 20,
        max: 100,
      },
    ],
    xAxis: {
      type: 'category',
      axisTick: {
        show: false //隐藏Y轴刻度
      },
      axisLabel: {
        rotate: 60
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.5)',
          width: 1,
          type: 'solid'
        }
      },
      data: data.zonesData.map(x => x.zoneName)
    },
    series: []
  };

  items.forEach(item => {
    option.series.push({
      name: item.title,
      type: 'bar',
      barWidth: 25,
      stack: '1',
      label: {
        normal: {
          show: true,
          position: 'inside',
          formatter: function (p) {
            return option.series[p.seriesIndex].trueData[p.dataIndex]
          }
        },
      },
      trueData: data.zonesData.map(x => x[item.property]),
      data: data.zonesData.map(x => x[item.property] / x['totalCapacity'])
    });
  });

  return option;
}


/** echart2的图表第二行第一个 */
export function echartsTaskTotal(data) {
  var myChart = echarts.init(document.getElementById('echart2'))
  const option = generateShelfSeries(data);
  console.log(option, '===option===');
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
/** echart5的图表 第二行第二个*/
export function echartsTaskChartEquipment(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echart5'))

  const option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff',
        fontSize: 10
      }
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    color: ['#F56C6C', '#67C23A', '#E6A23C'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        label: {
          formatter: '{c}个',
          // position: 'outsideFill'
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        data: data.series,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]

  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
/** echart6的图表 第三行*/
export function echartsTaskTotalLine(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echart6'))

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#dddc6b'
        }
      }
    },
    legend: {
      top: '0%',
      data: data.legends,
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    grid: {
      left: '10',
      top: '30',
      right: '10',
      bottom: '10',
      containLabel: true
    },

    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }

      },

      data: data.titles
      //  '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'
    }, {

      axisPointer: { show: false },
      axisLine: { show: false },
      position: 'bottom',
      offset: 20

    }],

    yAxis: [{
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        name: data.series[0].name,
        data: data.series[0].values,
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'white',
            fontSize: 10
          }
        },
        lineStyle: {
          normal: {
            color: 'red',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        },
        itemStyle: {
          normal: {
            color: 'red',
            borderColor: 'rgba(221, 220, 107, .1)'
          }
        }
      },
      {
        name: data.series[1].name,
        data: data.series[1].values,
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          show: true,
          position: 'bottom',
          textStyle: {
            color: '#2CABE3',
            fontSize: 10
          }
        },

        lineStyle: {
          normal: {
            color: 'green',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        },
        itemStyle: {
          normal: {
            color: 'green',
            borderColor: 'rgba(221, 220, 107, .1)'
          }
        }
      },
      {
        name: data.series[2].name,
        data: data.series[2].values,
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        label: {
          show: true,
          position: 'left',
          textStyle: {
            color: '#2CABE3',
            fontSize: 10
          }
        },

        lineStyle: {
          normal: {
            color: '#0184d5',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        },
        itemStyle: {
          normal: {
            color: '#0184d5',
            borderColor: 'rgba(221, 220, 107, .1)'
          }
        }
      }
      // {
      //   name: data.series[0].name,
      //   type: 'line',
      //   smooth: true,
      //   symbol: 'circle',
      //   symbolSize: 5,
      //   showSymbol: false,
      //   label: {
      //     show: true,
      //     position: 'top',
      //     textStyle: {
      //       color: '#2CABE3',
      //       fontSize: 10
      //     }
      //   },
      //   lineStyle: {
      //     normal: {
      //       color: '#0184d5',
      //       width: 2
      //     }
      //   },

      //   areaStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgba(1, 132, 213, 0.4)'
      //       }, {
      //         offset: 0.8,
      //         color: 'rgba(1, 132, 213, 0.1)'
      //       }], false),
      //       shadowColor: 'rgba(0, 0, 0, 0.1)'
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: '#0184d5',
      //       borderColor: 'rgba(221, 220, 107, .1)',
      //       borderWidth: 12
      //     }
      //   },
      //   data: data.series[0].values
      // },
    ]

  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
let memoryChart = null
/** Memory Chat */
export function setMemoryChart(memoryUseRate) {
  // 基于准备好的dom，初始化echarts实例
  if (!memoryChart) {
    memoryChart = echarts.init(document.getElementById('echart7'))
    window.addEventListener('resize', function () {
      memoryChart.resize()
    })
  }

  const option = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
      {
        name: '得分',
        type: 'gauge',
        detail: { formatter: '{value}%' },
        data: [{ value: 75, name: '得分' }],
        radius: '100%',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        splitNumber: 10, // 分割线的数量
        axisLine: {
          lineStyle: {
            width: 4,
            color: [
              [0.2, '#008FFF'],
              [0.3, '#00A2E8'],
              [0.4, '#00C3CD'],
              [0.5, '#00E7BB'],
              [0.6, '#00E79F'],
              [0.7, '#8CDC00'],
              [0.8, '#FFD306'],
              [0.9, '#FFB700'],
              [1, '#FF7D00']
            ]
          }
        },
        axisTick: {
          length: 8,
          lineStyle: {
            color: 'auto',
          }
        },
        splitLine: {
          length: 10,
          lineStyle: {
            color: 'auto',
          }
        },
        pointer: {
          width: 5,
          length: '80%',
          shadowColor: '#ccc', //默认透明
          shadowBlur: 5,
          shadowOffsetX: 3,
          shadowOffsetY: 3
        },
        title: {
          show: true,
          //  offsetCenter: [0, '-30%'],
          textStyle: {
            color: '#333',
            fontSize: 12
          }
        },
        detail: {
          show: true,
          offsetCenter: [0, '40%'],
          textStyle: {
            color: 'auto',
            fontSize: 12
          },
          formatter: '{value}%'
        },
        data: [{ value: memoryUseRate.useRateStr * 100, name: '' }],
        animationDuration: 4000, // 仪表盘动画时间
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  memoryChart.setOption(option)

}

let driveChart = null
/** DriveChart */
export function setDriveChart(driveUseRate) {
  // 基于准备好的dom，初始化echarts实例
  if (!driveChart) {
    driveChart = echarts.init(document.getElementById('echart8'))
    window.addEventListener('resize', function () {
      driveChart.resize()
    })
  }

  const option = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
      {
        name: '得分',
        type: 'gauge',
        detail: { formatter: '{value}%' },
        data: [{ value: 75, name: '得分' }],
        radius: '100%',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        splitNumber: 10, // 分割线的数量
        axisLine: {
          lineStyle: {
            width: 4,
            color: [
              [0.2, '#008FFF'],
              [0.3, '#00A2E8'],
              [0.4, '#00C3CD'],
              [0.5, '#00E7BB'],
              [0.6, '#00E79F'],
              [0.7, '#8CDC00'],
              [0.8, '#FFD306'],
              [0.9, '#FFB700'],
              [1, '#FF7D00']
            ]
          }
        },
        axisTick: {
          length: 8,
          lineStyle: {
            color: 'auto',
          }
        },
        splitLine: {
          length: 10,
          lineStyle: {
            color: 'auto',
          }
        },
        pointer: {
          width: 5,
          length: '80%',
          shadowColor: '#ccc', //默认透明
          shadowBlur: 5,
          shadowOffsetX: 3,
          shadowOffsetY: 3
        },
        title: {
          show: true,
          //  offsetCenter: [0, '-30%'],
          textStyle: {
            color: '#333',
            fontSize: 12
          }
        },
        detail: {
          show: true,
          offsetCenter: [0, '40%'],
          textStyle: {
            color: 'auto',
            fontSize: 12
          },
          formatter: '{value}%'
        },
        data: [{ value: driveUseRate.useRateStr * 100, name: '' }],
        animationDuration: 4000, // 仪表盘动画时间
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  driveChart.setOption(option)

}